How to create and customize site menus | Editor X

---

title: How to create and customize site menus | Editor X

---

In today's digital world, website design, functionality, and navigation are more important than ever. A well-designed site menu is crucial in providing an intuitive user experience and ensuring that your users can quickly find and access your site's content.

If you're looking to level up your web design skills or find expert mentorship in the field, the LiveLearning Editor X Community is the place for you. LiveLearning offers monthly NoCode design challenges with prizes and expert guidance to help you build a successful design business and advance your career.

In this post, we're exploring how to create and customize site menus on the powerful and intuitive Editor X platform. We'll cover setting up and managing site menus as well as customizing them at each breakpoint to ensure an optimal navigation experience for every screen size.

Getting started with site menus in Editor X

Editor X offers a variety of menu and navigation design options, including horizontal and vertical menus, styled menus, anchor or hamburger menus, and more. To add a menu to your site, follow these steps:

1. In the Editor X interface, navigate to the Add Panel.

2. Click on Menu and Search.

3. Choose the type of menu you want to add to your site – for example, a styled horizontal menu – and drag it to the desired location on the canvas.

By default, a new menu will contain a "Home" item. To add additional pages or links to the menu, continue with the following steps:

4. Click on Manage Menu.

5. Select Add New Item.

6. Choose whether you want to add site pages, external links, or a submenu title.

7. If adding site pages, select the existing pages you'd like to add to the menu.

After you've added your desired items to the menu, they will appear in the menu on the canvas.

Customizing and organizing your site menu

To reorder menu items, simply click and drag them to the desired position within the menu. You can also customize the link, rename a page, remove it from the menu, manage page settings or move a page to a submenu by clicking the three dots next to an item in the Manage Menu panel.

Working with submenus (drop-down menus)

Submenus, also known as drop-down menus, are a great way to organize your site's content and keep your menu concise and easy to navigate. To create a submenu, follow these steps:

1. In the Manage Menu panel, click on Add New Item.

2. Choose Submenu Title.

3. Enter a title for the submenu and click Apply.

4. To add items to the submenu, click the three dots next to the item you want to move and select Move to Submenu.

Customizing menus for different breakpoints (screen sizes)

To ensure your site provides the best possible navigation experience for your users, it's crucial to optimize your menus for different screen sizes. Editor X's breakpoint customization feature makes this process easy and efficient.

Simply follow these steps to customize your menu at different breakpoints:

1. In the Editor X interface, select the Breakpoint Bar at the top of the screen.

2. Click on the breakpoint you want to customize.

3. Preview and adjust the appearance and functionality of the menu for the selected breakpoint.

4. Repeat these steps for each breakpoint.

By optimizing your site's menu for different screen sizes, you'll not only improve user experience but also increase your site's accessibility, search engine ranking, and overall performance.

Conclusion

Taking full advantage of Editor X's site menu features and customizations allows you to create professional, user-friendly, and accessible websites for every screen size. By participating in the LiveLearning Editor X Community, you'll receive valuable guidance, resources, and networking opportunities to help you build a successful design business and further your career.

Start implementing these tips today, and watch your website's navigation and user experience reach a new level of excellence. Don't forget to join the LiveLearning Editor X Community for more resources, monthly NoCode design challenges, and expert guidance to grow your web design skills and career!